<template>
	<view class="compute">
		<view class="line" v-for="(item, index) in chooseList" :key="index">
			<view class="title"><text class="count">*</text>{{ item.name }}</view>
			<view class="choose">
				<u-cell-group :border="false" :customStyle="lineStyle">
					<u-cell :title="item.title" :isLink="true" :border="false" :titleStyle="item.titleStyle"
						:arrow-direction="item.direction" @click="chooseItem(item)"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="line">
			<view class="title" style="display: flex; justify-content: space-between;">
				<view>
					<text class="count">*</text>体积(CM³)
				</view>
				<view style="display: flex; color:#999; align-items: center;" @click="deleteLwh">
					<image style="width: 26rpx; height: 26rpx;" src="@/static/icon/delete.png" mode="aspectFill"></image>清空
				</view>
			</view>
			<view class="tips">*部分路线需通过打包后的体积来换算成体积重计算</view>
			<view class="choose space-between" v-for="item in form.lwh">
				<view class="inputClass">
					<u-input placeholder="长(cm)" type="number" border="none" v-model="item.long" :customStyle="inputStyle"></u-input>
					<!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
				</view>
				<view class="inputClass">
					<u-input placeholder="宽(cm)" type="number" border="none" v-model="item.wide" :customStyle="inputStyle"></u-input>
					<!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
				</view>
				<view class="inputClass">
					<u-input placeholder="高(cm)" type="number" border="none" v-model="item.high" :customStyle="inputStyle"></u-input>
					<!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
				</view>
			</view>
		</view>
		<view style="display: flex; justify-content: space-between;">
			<view class="line" style="width: 45%;">
				<view class="title" style="display: flex; color: #2354E3;" @click="pushLwh">
					<view style="margin-right: 20rpx;">追加</view>
					<u-image width="40rpx" height="40rpx" src="/static/icon/add.png"></u-image></view>
					<u-input placeholder="请输入追加数量" type="number" border="none" v-model="form.quantity" :customStyle="inputStyle1"></u-input>
			</view>
			<view class="line" style="width: 45%;">
				<view class="title" style="display: flex; color: #2354E3;" @click="copyLwh">
					<view style="margin-right: 20rpx;">复制</view>
					<u-image width="40rpx" height="40rpx" src="/static/icon/copy.png"></u-image>
				</view>
				<view class="choose">
					<u-input placeholder="请输入复制数量" type="number" border="none" v-model="form.copynum" :customStyle="inputStyle1"></u-input>
				</view>
			</view>
		</view>
		<view class="line">
			<view class="title"><text class="count">*</text>总重量(KG)<text class="weight">1KG=2.2磅</text></view>
			<view class="choose">
				<u-input placeholder="请输入包裹总和重量" border="none" v-model="form.weight" :customStyle="inputStyle"></u-input>
				<!-- placeholderStyle="{'font-size': '28rpx';
		'color':' #999999'}" -->
			</view>
		</view>
		<view class="btn" @click="toDetail">立即查询</view>
		<view class="tip"><text style="font-size: 28rpx; padding-right: 2rpx;">*</text>商品类别仅作为运费评估参考，最终以商品入库的类别为准</view>
		<!-- 选择列表 -->
		<u-picker :closeOnClickOverlay="true" :show="pickerShow" :columns="pickerColumns" :defaultIndex="defaultIndex"
			@confirm="confirm" @cancel="cancel"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择的索引
				chooseIndex: 0,
				// 选择列表
				chooseList: [{
						id: 0,
						name: "国家",
						title: "请选择国家",
						direction: "down",
						titleStyle: {
							"font-size": "28rpx",
							color: "#999999",
						},
					},
					{
						id: 1,
						name: "收货区域",
						title: "请选择收货区域",
						direction: "down",
						titleStyle: {
							"font-size": "28rpx",
							color: "#999999",
						},
					},
					{
						id: 2,
						name: "运输路线",
						title: "请选择运输路线",
						direction: "down",
						titleStyle: {
							"font-size": "28rpx",
							color: "#999999",
						},
					},
				],
				// 选择框样式
				lineStyle: {
					"background-color": "#F5F5F5",
					"border-radius": "5rpx",
					padding: "15rpx",
				},
				// 输入框样式
				inputStyle: {
					"background-color": "#F5F5F5",
					"border-radius": "5rpx",
					"padding-left": "43rpx",
					padding: "30rpx",
				},
				inputStyle1:{
					"background-color": "#F5F5F5",
					"border-radius": "5rpx",
					"padding-left": "16rpx",
					padding: "10rpx 0",
				},
				form:{
					// 收货区域id
					c_id:'',
					// 运输路线id
					y_id:'',
					// 重量
					weight: "",
					// 追加数量
					quantity:'',
					// 复制数量
					copynum:'',
					// 长宽高
					lwh:[{
						// 长度
						long: "",
						// 宽度
						wide: "",
						// 高度
						high: "",
					}]
				},
				// 选择展示
				pickerShow: false,
				// 选择单项
				pickerColumns: [],
				// 默认选择的索引
				defaultIndex: [],
				country: ["美国", "加拿大"],
				area: [
					// "美西地区(80000-99999邮编段)", "美中地区(40000-79999邮编段)", "美东地区(00000-39999邮编段)"
					],
				line: ["空运普货直邮", "海运普货直邮"],
			};
		},

		onLoad() {
			this.getLineData();
			this.getCountryData();
		},

		methods: {
			// 删除长宽高
			deleteLwh(){
				this.form.lwh = this.form.lwh.slice(0,1);
			},
			// 追加长宽高
			pushLwh(){
				if(!this.form.quantity){
					uni.showToast({
						title:"请先输入追加数量！",
						icon:"none"
					});
					return
				}
				for (var i = 0; i<this.form.quantity; i++) {
					this.form.lwh.push({long: "", wide: "", high: ""});
				}
				this.form.quantity = '';
			},
			// 复制长宽高
			copyLwh(){
				if(!this.form.copynum){
					uni.showToast({
						title:"请先输入复制数量！",
						icon:"none"
					});
					return
				}
				for (var i = 0; i<this.form.copynum; i++) {
					this.form.lwh.push({long: this.form.lwh[0].long, wide: this.form.lwh[0].wide, high: this.form.lwh[0].high});
				}
			},
			getLineData(){
				this.$api.post({
				    url: "/ebapi/public_api/transport_route",
				    // data: {},
				    success: (res) => {
						this.line = res;
					},
				 })
			},
			getCountryData(){
				this.$api.post({
				    url: "/ebapi/article_api/get_article_cate",
				    // data: {},
				    success: (res) => {
						this.country = res;
					},
				 })
			},
			// 点击选择项
			chooseItem(item) {
				console.log(item,"item 123")
				this.pickerColumns = [];
				this.chooseIndex = item.id;
				if(item.id == 1 && item.direction == "down" && this.chooseList[0].title=="请选择国家"){
					uni.showToast({
					    title: "请先选择国家",
					    icon: "none",
					    duration: 2000
					});
					return
				}
				if (item.direction == "down") {
					item.direction = "up";
					this.pickerShow = true;
					if (item.id == 0) {
						let country = this.country.map(it=>it.title);
						this.pickerColumns.push(country);
					} else if (item.id == 1) {
						let area = this.area.map(it=>it.title);
						this.pickerColumns.push(area);
					} else if (item.id == 2) {
						let line = this.line.map(it=>it.info);
						this.pickerColumns.push(line);
					}
					if (item.titleStyle.color == "#999999") {
						this.defaultIndex = [];
					} else {
						this.defaultIndex.push(this.pickerColumns[0].indexOf(item.title));
					}
				} else {
					item.direction = "down";
				}
			},
			// 选择框选择
			confirm(e) {
				console.log(e, "列表选项");
				this.chooseList[this.chooseIndex].title = e.value[0];
				this.chooseList[this.chooseIndex].titleStyle = "#333333";
				this.pickerShow = false;
				// 选择国家后给区域赋值
				if (this.chooseIndex == 0) {
					this.area = this.country[e.indexs[0]] && this.country[e.indexs[0]].list;
				}else if (this.chooseIndex == 1) {
					this.form.c_id = this.area[e.indexs[0]].id;
				}else if (this.chooseIndex == 2) {
					this.form.y_id = this.line[e.indexs[0]].id;
				}
				this.chooseList.forEach((element) => {
					element.direction = "down";
				});
			},
			// 选择框取消
			cancel() {
				this.pickerShow = false;
				this.chooseList.forEach((element) => {
					element.direction = "down";
				});
			},
			// 去详情页
			toDetail() {
				let lwh = this.form.lwh;
				for (var i = 0; i < lwh.length; i++) {
					for (let key in lwh[i]) {
						if(!lwh[i][key]){
							uni.showToast({
							    title: "请先输入长宽高",
							    icon: "none",
							    duration: 2000
							});
							return
						}
					}
				}
				for (let key in this.form) {
					if(!this.form[key] && key!='quantity' && key!='copynum'){
						uni.showToast({
						    title: "请先完善填写信息",
						    icon: "none",
						    duration: 2000
						});
						return
					}
				}
				this.$uniApi.to(`/pages/compute/computeDetail?form=${JSON.stringify(this.form)}`);
			},
		},
	};
</script>

<style lang="scss">
	.compute {
		width: 702rpx;
		min-height: 1355rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 10rpx;
		opacity: 1;
		padding: 42rpx 30rpx;
		margin: 24rpx 0;

		.line {
			margin-bottom: 34rpx;

			.choose {
				.inputClass {
					width: 195rpx; margin-top: 20rpx;
				}
			}

			.title {
				font-size: $uni-text-size-title;
				margin-bottom: 20rpx;

				.count {
					color: #ff0000;
				}

				.weight {
					color: #999999;
				}
			}

			.tips {
				color: #999999;
				font-size: 20rpx;
				margin-top: -10rpx;
				// margin-bottom: 20rpx;
			}
		}

		.btn {
			color: #ffffff;
			font-size: 32rpx;
			padding: 33rpx 225rpx;
			border-radius: 50rpx;
			font-weight: bold;
			margin: 62rpx 15rpx 32rpx;
			background-color: $uni-color-main;
			text-align: center;
		}

		.tip {
			color: #999999;
			font-size: 24rpx;
			text-align: center;
			color: #ff0000; 
		}
	}
</style>